<template>
  <div>
    <div v-if="flag == 0">
      <div style="padding-top: 20px; margin-left: 10px">
        <h3>店铺信息</h3>
      </div>
      <div v-loading="pageLoad" style="display: flex">
        <div style="width: 45%; border-right: 1px solid #ededee; display: flex">
          <div
            class="demo-image__preview"
            style="margin-top: 10px; margin-left: 10px"
          >
            <el-image
              :src="mechanismDetailList.mec_logo"
              style="width: 100px; height: 100px"
            />
          </div>
          <div style="margin-left: 5%; align-items: stretch">
            <p style="margin-top: 25px">
              <span>机构名称: {{ mechanismDetailList.mec_name || '' }}</span>
              &nbsp; &nbsp;
              <span
                v-permissions="{ permission: ['edit:MechanismInfo'] }"
                style="color: #1682e6; cursor: pointer"
                @click="editMech(mechanismDetailList)"
              >
                编辑
              </span>
            </p>
            <p style="margin-top: 25px">
              机构类型: {{ mechanismDetailList.mec_type_name }}
            </p>
            <p style="margin-top: 25px">
              <span>机构创建人: {{ mechanismDetailList.user_name }}</span>
              &nbsp; &nbsp;
              <span
                v-permissions="{ permission: ['edit:MechanismInfo'] }"
                style="color: #1682e6; cursor: pointer"
                @click="editMechContacts(mechanismDetailList)"
              >
                编辑
              </span>
            </p>
            <p style="margin-top: 25px">
              机构联系人: {{ mechanismDetailList.mec_contacts }}
            </p>

            <p style="margin-top: 25px">
              机构地址: {{ mechanismDetailList.mec_address }}
            </p>
            <p style="margin-top: 25px">
              机构电话: {{ mechanismDetailList.mec_tel }}
            </p>
            <p style="margin-top: 25px">
              客服电话: {{ mechanismDetailList.service_tel }}
            </p>
            <p style="margin-top: 25px">
              营业状态: {{ mechanismDetailList.mec_status_name }}
            </p>

            <p
              v-if="mechanismDetailList.expire_at == 0"
              style="margin-top: 25px"
            >
              系统到期时间: 长期
            </p>
            <p v-else style="margin-top: 25px">
              系统到期时间: {{ mechanismDetailList.expire_at }}
            </p>
            <p style="margin-top: 25px">
              上午营业: {{ mechanismDetailList.morning_start_time }} -
              {{ mechanismDetailList.morning_end_time }}
            </p>
            <p style="margin-top: 25px">
              下午营业: {{ mechanismDetailList.afternoon_start_time }} -
              {{ mechanismDetailList.afternoon_end_time }}
            </p>
          </div>
        </div>
        <div style="width: 50%; height: 300px; margin-left: 5%">
          <div>
            <p style="margin-top: 25px">
              <span>主体信息: {{ mechanismData.company_name || '' }}</span>
              &nbsp; &nbsp;
              <span
                v-permissions="{ permission: ['edit:MechanismInfo'] }"
                style="color: #1682e6; cursor: pointer"
                @click="edit(mechanismDetailList)"
              >
                编辑
              </span>
            </p>
            <p style="margin-top: 25px">
              <span>店铺经营证明:</span>
              &nbsp; &nbsp;
              <span style="color: #1682e6; cursor: pointer" @click="license">
                编辑
              </span>
            </p>
            <p style="margin-top: 25px">
              纳税人识别号: {{ mechanismData.company_sn || '' }}
            </p>
            <p style="margin-top: 25px">
              负责人姓名: {{ mechanismData.company_person || '' }}
            </p>
            <p style="margin-top: 25px">
              地址: {{ mechanismData.province_name || '' }}
              {{ mechanismData.city_name || '' }}
              {{ mechanismData.region_name || '' }}
              {{ mechanismData.company_address || '' }}
            </p>
          </div>
        </div>
      </div>
      <!-- 图片营业执照 -->
      <el-dialog
        :before-close="handleClose"
        title="营业执照"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-image
          :src="mechanismData.company_license || ''"
          style="width: 100px;height100px"
        />
      </el-dialog>

      <!-- 更变 -->
      <el-dialog
        :before-close="handleClose"
        title="更变"
        :visible.sync="dialogVisibleContacts"
        width="30%"
      >
        <span>选择更变人:</span>
        <el-select
          v-model="userValue"
          placeholder="请选择"
          style="margin-left: 10px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.real_name"
            :value="item.id"
          />
        </el-select>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleContacts = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="flag == 1">
      <Editmechanism :mcdata="mcdata" @showMain="showMain" />
    </div>
    <div v-if="flag == 2">
      <EditmeData :mcdata="mcdata" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import {
    mechanismSetting,
    mechanismDetail,
    mechanismChange,
  } from '@/api/mechanism'
  import { getUserList } from '@/api/public'

  import Editmechanism from './components/editmechanism.vue'
  import EditmeData from './components/editmeData.vue'

  export default {
    components: {
      Editmechanism,
      EditmeData,
    },
    data() {
      return {
        pageLoad: false, // 页面加载样式
        flag: 0,
        mechanismData: {},
        mechanismDetailList: {},
        dialogVisible: false,
        mcdata: {},
        dialogVisibleContacts: false,
        options: [],
        userValue: '',
      }
    },
    mounted() {
      this.init()
    },
    created() {},
    methods: {
      init() {
        this.pageLoad = true
        mechanismSetting().then((e) => {
          if (e.data) {
            this.mechanismData = e.data
          } else {
            this.mechanismData = {}
          }
        })
        mechanismDetail().then((e) => {
          this.mechanismDetailList = e.data
          this.pageLoad = false
        })
      },
      license() {
        this.dialogVisible = true
      },
      edit(e) {
        this.mcdata = e
        this.flag = 1
      },
      editMech(e) {
        this.mcdata = e
        this.flag = 2
      },
      editMechContacts(e) {
        console.log()
        this.mcdata = e
        this.userValue = ''
        getUserList().then((j) => {
          this.options = j.data
          console.log(j.data)
          this.dialogVisibleContacts = true
        })
      },
      submit() {
        const data = {
          user_id: this.userValue,
          original_user_id: this.mcdata.user_id,
          id: JSON.parse(window.localStorage.getItem('mec_id')),
        }
        mechanismChange(data).then(() => {
          this.init()
          this.dialogVisibleContacts = false
        })
      },
      showMain(e) {
        this.flag = e
        this.init()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }
</style>
